<template>
	<view class="wrapper">
		<view class="new_tag_box" @tap="changeAlert">
			<image src="../../static/user/yuanjialan.png" mode="aspectFill" class="yuanjia"></image>
			<view class="build_tag">新建标签</view>
		</view>
		<view class="tag_content_box">
			<dl-swipe class="swipe_box" v-for="(val,index) in myList" :key='val.groupId' btnWidth='160'>
				<view class="tag_box" slot="main" @tap="updateTag(val)">
					<view class="tag_name">{{val.groupName}}({{val.userIdList.length}})</view>
					<view class="tag_users">
						<user-list :userIdList='val.userIdList'></user-list>
					</view>
				</view>
				<view class="btn_box center cfff f30" slot="btn"><view class="delete center" @tap="friendGroupDelete(val.groupId)">删除</view></view>
			</dl-swipe>
		</view>
		<alert alertTitle='新建标签' :showImg='false' :showInput='true' placeholder='请输入标签名' @alertConfirm='alertConfirm' v-if='showAlert'></alert>
	</view>
</template>

<script>
import dlSwipe from '../../components/dl-swipe/dl-swipe.vue';
import alert from '../../components/alert/alert.vue';
import userList from '../../components/user-list/user-list.vue';
export default {
	data() {
		return {
			myList:[],
			showAlert:false
		};
	},
	comments: {
		dlSwipe,alert,userList
	},
	onShow() {
		this.friendGroupList()
	},
	methods: {
		updateTag(val){
			this.$open('./set_tag?group='+JSON.stringify(val))
		},
		// 显示输入框
		changeAlert(){
			this.showAlert=!this.showAlert
		},
		// 弹窗回调
		alertConfirm(type,text){
			if(type==1){
				this.$ajax(this.apiList.friendGroupAdd,{
					groupName:text
				}).then(res => {
					this.$sToast('添加成功')
					this.changeAlert()
					this.friendGroupList()
				});
			}else{
				this.changeAlert()
			}
		},
		// 删除标签
		friendGroupDelete(groupId){
			this.$ajax(this.apiList.friendGroupDelete,{
				groupId:groupId
			}).then(res => {
				this.$sToast('删除成功')
				this.friendGroupList()
			});
		},
		// 查询标签
		friendGroupList(){
			this.$ajax(this.apiList.friendGroupList,).then(res => {
				this.myList=res.data
			});
		}
	}
};
</script>

<style>
.wrapper {
	background-color: #f3f3f3;
}
.new_tag_box {
	height: 104rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	align-items: center;
	border-top: 1rpx solid rgba(224, 224, 224, 1);
}
.yuanjia {
	width: 38rpx;
	height: 38rpx;
	margin: 0 20rpx 0 30rpx;
}
.build_tag {
	font: 30rpx/30rpx '';
	font-weight: 500;
	color: rgba(2, 151, 254, 1);
}
.tag_content_box {
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	border-top: 1rpx solid rgba(224, 224, 224, 1);
	background: rgba(255, 255, 255, 1);
}
.tag_box {
	height: 118rpx;
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	padding: 24rpx 0 0 32rpx;
}
.tag_name {
	font: 28rpx/28rpx '';
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	margin-bottom: 20rpx;
}
.tag_users {
	font: 22rpx/22rpx '';
	font-weight: 500;
	color: rgba(153, 153, 153, 1);
}
.last_box {
	border: none;
}
.btn_box {
	position: absolute;
	left: 750rpx;
	top: 0;
}
.delete {
	width: 160rpx;
	height: 118rpx;
	background: rgba(255, 53, 67, 1);
}
.swipe_box {
	position: relative;
	transition: all 0.3s;
}
</style>
